<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {getDays} from "@/api/air/pollutant";
import dayjs from 'dayjs'
const animationDuration = 1250

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      loading:true,
      zoomSize:8,
      chart: null,
      date:[],
      chartData:{
        date:[],
        ex:[],
        go:[],
        mi:[],
        mo:[],
        se:[],
        wo:[],
      },
      dataList:[],
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  created(){
    this.getDays();
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // const zoomSize = 8;

    getDays(){    
      getDays().then(response => {
       var res = response.data;
       var len =0;
       var maxLen = 0;
       var index = 0;
       var index1 = 0;
       var index2 = 0;
       var index3 = 0;
       var index4 = 0;
       var index5 = 0;
       var index6 = 0;
       let newStr = JSON.parse(JSON.stringify(res))
       for(var key in newStr ){
        maxLen = maxLen+1;
       }
       var now = 0;
      for(var key in newStr ){
        now++;
          var o = newStr[key]
          this.chartData.date.push(JSON.parse(JSON.stringify(key)));
        
          for(var k in o){
            
            

           let d = JSON.parse(JSON.stringify(o[k]))
           
            if(k==='1'){
              index1++;
              this.chartData.ex.push(d)

              if(index1>=len){
                len = index1;
              }else if(this.chartData.ex.length<len){
                for(var i = 1;i<=now-index1;i++){
                  this.chartData.ex.push(0)
                }
                index1 = now;

              }
            }else if(k==='2'){
              index2++;
              this.chartData.go.push(d)
              if( index2>=len){
                len =  index2;
              }else if(this.chartData.go.length<len){
                for(var i = 1;i<=now-index2;i++){
                  this.chartData.go.push(0)
                }
                index2 = now;
              }
            }
            else if(k==='3'){

              index3++;

              if(index3>=len){
                len = index3;
              }else if(this.chartData.mi.length<len){
                
                for(var i = 1;i<=now-index3;i++){
                  this.chartData.mi.push(0)
                }
                index3 = now;
              }
              this.chartData.mi.push(d)
            }
            else if(k==='4'){
              index4++;
              this.chartData.mo.push(d)
              if(index4>=len){
                len = index4;
              }else if(this.chartData.mo.length<len){
                for(var i = 1;i<=now-index4;i++){
                  this.chartData.mo.push(0)
                }
                index4 = now;
              }
            }
            else if(k==='5'){
              index5++;
              if(index5>=len){
                len = index5;
              }else if(this.chartData.se.length<len){
                for(var i = 1;i<=now-index5;i++){
                  this.chartData.se.push(0)
                }
                index5 = now;
              }
              this.chartData.se.push(d)

            }
            else{
              index6++;
              if(index6>=len){
                len =index6;
              }else if(this.chartData.wo.length<len){
                for(var i = 1;i<=now-index6;i++){
                  this.chartData.wo.push(0)
                }
              }
              index6 = now;

              this.chartData.wo.push(d)

            }
           
          }
          // console.log("-------------------------")
          // console.log(this.chartData)
          // console.log("-------------------------")

      }
      
      this.initChart();
      this.loading = false;
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.chartData.date,
          axisLine: {
          show: false,//不显示坐标轴线
    },

    axisLabel:{
             //x轴文字的配置
            // show: true,
            // rotate:15,
            // interval: 4,//使x轴文字显示全
            // showMaxLabel: true,
            textStyle:{
              }
          },
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          splitArea: {
          show: false
          },
          splitLine:{
            lineStyle:{
            width:0,
            // type:'dashed',
          }
          },
          axisLabel:{
            textStyle:{
              }
          },
          
          
        }],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [{
          
          name: '优',
          type: 'bar',
          stack: 'vistors',
          barWidth: '40%',
          data: this.chartData.ex,
          itemStyle: {
        color: 
        
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#6d64e8' },
          { offset: 0.5, color: ' #5271e6' },
          { offset: 1, color: ' #5271e6' },
        
        ]),
      },
          animationDuration

        }, 
        {
          name: '良',
          type: 'bar',
          stack: 'vistors',
          barWidth: '40%',
          data: this.chartData.go,
          animationDuration
        }, 
        {
          name: '轻度污染',
          type: 'bar',
          stack: 'vistors',
          barWidth: '40%',
          data: this.chartData.mi,
          animationDuration
        }, 
        {
          name: '中度污染',
          type: 'bar',
          stack: 'vistors',
          barWidth: '40%',
          data: this.chartData.mo,
          animationDuration
        }, 
        {
          name: '重度污染',
          type: 'bar',
          stack: 'vistors',
          barWidth: '40%',
          data: this.chartData.se,
          animationDuration
        }, 
        {
          name: '严重污染',
          type: 'bar',
          stack: 'vistors',
          barWidth: '40%',
          data: this.chartData.wo,
          animationDuration
        }, 
        
      ]
      })
    },


    
  }
}
</script>
